<template>
	<view style="height:  500rpx;margin-left: 40upx;">
		<l-f2 ref="chart"></l-f2>
	</view>
</template>

<script>
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	import lF2 from '@/uni_modules/lime-f2/components/l-f2/l-f2.vue';
	export default {
		props: {
			datas: Array,
		},
		components: {
			lF2
		},
		data() {
			return {};
		},
		watch: {
			//haveTask 为接收参数的名称
			datas: {
				handler(item, index) {
					this.$refs.chart.init(config => {
						config.padding = ['auto', 'auto', 'auto', 30]
						const chart = new F2.Chart(config);
						chart.source(this.datas, {
							lastScore: {
								min: 0,
								max: 100
							}
						});
						chart.coord('polar');
						chart.axis('lastScore', {
							label: null,
							grid: function grid(text, index, total) {
								if (index === total - 1) {
									return {
										stroke: 'rgb(113, 113, 112)',
										strokeOpacity: 1,
										lineDash: null
									};
								}
								return {
									lineDash: null,
									stroke: 'rgb(220, 220, 220)',
									strokeOpacity: 0.4
								};
							}
						});
						chart.axis('kindName', {
							label: {
								fontSize: 10,
								width: 50,
							},
							grid: {
								stroke: 'rgb(113, 113, 112)',
								strokeOpacity: 0.4,
								lineDash: null
							}
						});
						chart.legend({
							align: 'center',
							itemWidth: 100
						});
						chart.tooltip({
							custom: true, // 自定义 tooltip 内容框
							onChange: function onChange(obj) {
								const legend = chart.get('legendController').legends.top[0];
								const tooltipItems = obj.items;
								const legendItems = legend.items;
								const map = {};
								legendItems.forEach(function(item) {
									map[item.name] = _.clone(item);
								});
								tooltipItems.forEach(function(item) {
									const name = item.name;
									const lastScore = lastScore.lastScore;
									if (map[name]) {
										map[name].lastScore = lastScore;
									}
								});
								legend.setItems(_.lastScore(map));
							},
							onHide: function onHide() {
								const legend = chart.get('legendController').legends.top[0];
								legend.setItems(chart.getLegendItems().country);
							}
						});
						chart.area()
							.position('kindName*lastScore')
							.style({
								fillOpacity: 0.4
							});
						chart.render();
						return chart;
					});
				},
				deep: true // 深度监听父组件传过来对象变化
			}
		},

		mounted() {

			// this.$refs.chart.init(config => {
			//   const chart = new F2.Chart(config);
			//   chart.source(this.data, {
			//     value: {
			//       min: 0,
			//     }
			//   });
			//   chart.coord('polar');
			//   chart.axis('value', {
			//     label: null,
			//     grid: function grid(text, index, total) {
			//       if (index === total - 1) {
			//         return {
			//           stroke: 'rgb(113, 113, 112)',
			//           strokeOpacity: 1,
			//           lineDash: null
			//         };
			//       }

			//       return {
			//         lineDash: null,
			//         stroke: 'rgb(220, 220, 220)',
			//         strokeOpacity: 0.4
			//       };
			//     }
			//   });
			//   chart.axis('time', {
			//     label: {
			//       fontSize: 12
			//     },
			//     grid: {
			//       stroke: 'rgb(113, 113, 112)',
			//       strokeOpacity: 0.4,
			//       lineDash: null
			//     }
			//   });
			//   chart.legend({
			//     align: 'center',
			//     itemWidth: 100
			//   });
			//   chart.tooltip({
			//     custom: true, // 自定义 tooltip 内容框
			//     onChange: function onChange(obj) {
			//       const legend = chart.get('legendController').legends.top[0];
			//       const tooltipItems = obj.items;
			//       const legendItems = legend.items;
			//       const map = {};
			//       legendItems.forEach(function(item) {
			//         map[item.name] = _.clone(item);
			//       });
			//       tooltipItems.forEach(function(item) {
			//         const name = item.name;
			//         const value = item.value;
			//         if (map[name]) {
			//           map[name].value = value;
			//         }
			//       });
			//       legend.setItems(_.values(map));
			//     },
			//     onHide: function onHide() {
			//       const legend = chart.get('legendController').legends.top[0];
			//       legend.setItems(chart.getLegendItems().country);
			//     }
			//   });
			//   chart.area()
			//     .position('time*value')
			//     .style({
			//       fillOpacity: 0.4
			//     });
			//   chart.render();
			//   return chart;
			// });








		}
	}
</script>
